<template>
  <div class="edit">
    <div>
      <van-nav-bar
        :title="xxx"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      fixed/>
    </div>
    <div class="address">
      
      <div class="list">
        <div class="adresslist">
          <span>收货人</span> <input type="text" ref="men" />
        </div>
        <div class="adresslist">
          <span>手机号码</span> <input type="text" ref="number" />
        </div>
        <div class="adresslist" @click="selectAddress">
          <span>所在地区</span> <input type="text" ref="city" />
          <!-- 弹出地址选择 -->
          <van-popup v-model="show" position="bottom">
            <van-area
              title="标题"
              :area-list="areaList"
              @confirm="getAddress"
            />
          </van-popup>
        </div>
        <div class="adresslist">
          <span>详细地址</span>
          <input type="text" ref="detail" />
        </div>
        <div class="adresslist">
          设置默认地址<van-switch v-model="checked" size="30px" />
        </div>
      </div>
    </div>
    <div @click="save" class="save">保存</div>
  </div>
</template>

<script>
import { detailAction, saveAction } from "@/api/cart/order/address/edit";
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      info: {},
      areaList,
      show: false,
      checked: false,
      xxx: "",
      yy: 0,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    selectAddress() {
      this.show = !this.show;
    },
    getAddress(val) {
      console.log(val);
      this.$refs.city.value = val.map((ele) => ele.name).join("");
      // this.show = !this.show;
    },
    save() {
      if (localStorage.getItem("add") == 1) {
        saveAction({
          address: this.$refs.city.value,
          addressId: this.$route.params.id,
          checked: false,
          detailadress: this.$refs.detail.value,
          openId: localStorage.getItem("openId"),
          telNumber: this.$refs.number.value,
          userName: this.$refs.men.value,
        }).then((res) => {
          console.log(res);
          // this.yy += 1;
        });
      }else if (localStorage.getItem("add") == 0) {
       saveAction({
          address: this.$refs.city.value,
          addressId: this.yy,
          checked: false,
          detailadress: this.$refs.detail.value,
          openId: localStorage.getItem("openId"),
          telNumber: this.$refs.number.value,
          userName: this.$refs.men.value,
        }).then((res) => {
          console.log(res);
          this.yy += 1;
        });
    }
    },
  },
  created() {
    if (localStorage.getItem("add") == 1) {
      this.xxx = "编辑地址";
      detailAction({
        id: this.$route.params.id,
      }).then((res) => {
        console.log(res);
        this.$refs.men.value = res.data.name;
        this.$refs.number.value = res.data.mobile;
        this.$refs.city.value = res.data.address;
        this.$refs.detail.value = res.data.address_detail;
        this.info = res.data;
      });
    } else if (localStorage.getItem("add") == 0) {
      this.xxx = "新增地址";
    }
  },
};
</script>

<style lang="scss" scoped>
.edit {
  background-color: #f7f4f4;
  .address {
    margin: 0 auto;
    .list {
      margin: 45px 30px 0px 30px;
      position: relative;
      .adresslist {
        margin-bottom: 30px;
        font-size: 30px;
        color: #131313;
        letter-spacing: 0;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        span {
          margin: 20px 0px 68px 0px;
        }
        input {
          width: 480px;
          height: 80px;
          font-size: 28px;
          font-weight: 400;
          border: none;
          padding-left: 20px;
        }
      }
    }
  }
  .save {
    width: 710px;
    height: 90px;
    background: #cea62a;
    border-radius: 44.5px;
    font-size: 30px;
    color: #ffffff;
    letter-spacing: 0;
    font-weight: 500;
    text-align: center;
    line-height: 90px;
    margin-top: 107px;
  }
}
</style>